---
import type { SiteMeta } from "@/types";
import siteMeta from "src/site-meta.config";
import "../styles/global.css";

export type Props = SiteMeta;

const {
	title,
	description = siteMeta.description,
	image,
} = Astro.props as Props;

const titleSeparator = "•";
const siteTitle = `${title} ${titleSeparator} ${siteMeta.title}`;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<!-- Primary Meta Tags -->
<title>{siteTitle}</title>
<meta name="title" content={siteTitle} />
<meta name="description" content={description} />

<!-- Global Metadata -->
<link rel="icon" href="/favicon.ico" />
<link rel="apple-touch-icon" href="/images/icon/192x192.png" />
<link rel="manifest" href="/manifest.webmanifest" />
<meta name="theme-color" content={siteMeta.themeColorLight} />

<!-- Open Graph / Facebook -->
<meta property="og:locale" content={siteMeta.ogLocale} />
<meta property="og:type" content="website" />
<meta property="og:url" content={canonicalURL} />
<link rel="canonical" href={canonicalURL} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
{image && <meta property="og:image" content={image} />}

<!-- Twitter -->
<meta
	property="twitter:card"
	content={image ? "summary_large_image" : "summary"}
/>
<meta property="twitter:title" content={title} />
<meta property="twitter:description" content={description} />
{image && <meta property="twitter:image" content={image} />}
